<template>
  <div class="page">

    <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-width="140px" :disabled="status == 3">
      <div class="title">基础信息</div>
      <el-form-item label="治疗方案：" prop="method">
        <el-input v-model="addForm.method" />
      </el-form-item>
      <el-form-item label="图片：">
        <div class="upload_image_box">
          <div class="image_list">
            <div class="image_cell" v-for="(item,index) in (addForm.pics||[])" :key="index">
              <el-image class="el_image" :src="item.url" :preview-src-list="[item.url]">
              </el-image>
              <div class="icon_list">
                <i class="el-icon-zoom-in" @click="previewImage(item)"></i>
                <i class="el-icon-delete" @click="removeImage(item,'pics')"></i>
              </div>
              <div class="blk"></div>
            </div>
          </div>
          <el-upload :action="COMMONFILEUPLOAD" v-if="!addForm.pics||addForm.pics.length<=0" list-type="picture-card" :show-file-list="false" :limit="1" :headers="uploadHeaders" :on-success="(response, file, fileList) =>
              onSuccess(response, file, fileList, 'pics')">
            <i class="el-icon-plus" />
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="治疗简介：">
        <el-input type="textarea" v-model="addForm.introduce" :resize="resize" :rows="rows"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" :loading="loading" @click="saveInfo">保 存</el-button>
        <el-button type="default" @click="goBack()">取 消</el-button>
      </el-form-item>

    </el-form>

  </div>
</template>
<script>
import WangEditor from "@/components/wangEditor";
import { COMMONFILEUPLOAD } from "@/http/system";
import {
  BASEURL,
  ADDTREATMENTINFO,
  EDITTREATMENTINFO,
  GETTREATMENTINFO,
} from "@/http/report";
import { deepClone, showToast } from "@/common/util";
import "viewerjs/dist/viewer.css";
import { api as viewerApi } from "v-viewer";
export default {
  components: {
    WangEditor,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    return {
      addForm: {},
      randomKey: "",
      areaRows: 5,
      areaResize: "none",
      COMMONFILEUPLOAD: COMMONFILEUPLOAD,
      uploadHeaders: {},
      addFormRules: {
        method: [
          { required: true, message: "请输入治疗方案", trigger: "blur" },
        ],
      },
      cityList: [],
      projectList: [],
      hospitalList: [],
      loading: false,
      status: "",
      dialogImageUrl: "",
      dialogVisible: false,
      resize: "none",
      rows: 5,
      imageList: [],
      imageViewer: "",
    };
  },
  mounted() {
    const o = this.$route.query;
    /**
     * 新增：status：1
     * 编辑：status：2
     * 详情：status：3
     */
    this.status = o.status;
    if (o.id) {
      this.getInfo(o.id);
    }

    const token = sessionStorage.getItem("token");
    this.uploadHeaders = { Authorization: token };
  },
  methods: {
    /** 监听文件上传成功 */
    onSuccess(response, file, fileList, id) {
      if (response.code == 200) {
        const obj = this.addForm[id] || [];
        const n = {};
        n.name = response.data;
        n.url = BASEURL + response.data;
        n.path = response.data;
        obj.push(n);
        // this.$set(this.addForm, id, response.data);
        this.$set(this.addForm, id, obj);
        this.$refs.addForm.validateField("pics");
      }
    },

    // 获取参数
    getParams() {
      let oParams = deepClone(this.addForm);
      let list = oParams.pics || [];
      let arr = [];
      list.map((k) => {
        arr.push(k.path);
      });
      oParams.pics = arr;
      return oParams;
    },

    // 保存口腔问题信息
    saveInfo() {
      const _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;

        // 编辑口腔问题
        if (oParams.id) {
          EDITTREATMENTINFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }

        ADDTREATMENTINFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 返回
    goBack() {
      this.$router.go(-1);
    },

    // 获取口腔问题详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GETTREATMENTINFO(oParams).then((res) => {
        let { data } = res;
        let arr = [];
        if (data.pics && data.pics.length > 0) {
          data.pics.map((k) => {
            let o = {};
            o.name = k;
            o.path = k;
            o.url = BASEURL + k;
            arr.push(o);
          });
        }
        data.pics = arr;
        this.addForm = data;
      });
    },

    // 预览图片
    previewImage(row) {
      this.imageList = [row.url];
      viewerApi({
        images: this.imageList,
      });
    },

    // 删除图片
    removeImage(row, id) {
      this.imageList = [];
      this.$set(this.addForm, id, []);
    },
  },
};
</script>
<style lang="scss">
.el-dialog__wrapper {
  z-index: 99999 !important;
}
.v-modal {
  z-index: 99998 !important;
}
</style>
<style lang="scss" scoped>
.page {
  background: #fff;
  border-radius: 6px;
  padding: 0 16px;
  overflow: hidden;
}
.title {
  font-size: 20px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: bold;
  color: #000000;
  margin: 24px 0;
}
.base_info {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 50%;
  }
}
.show_tips {
  display: flex;
  line-height: 1.8;
  margin: 10px 0;
  .name {
    flex-shrink: 0;
  }
  .txt {
    flex: 1;
    .cred {
      color: #f00;
    }
  }
}
.a_select {
  width: 100%;
}
.upload_image_box {
  display: flex;
  .image_list {
    display: flex;
    flex-wrap: wrap;
    .image_cell {
      position: relative;
      width: 148px;
      height: 148px;
      border: 1px dashed #d8d8d8;
      border-radius: 4px;
      padding: 2px;
      box-sizing: border-box;
      .icon_list {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        z-index: 3;
        i {
          font-size: 24px;
          color: #fff;
          margin: 0 10px;
          cursor: pointer;
        }
      }
      .el_image {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
      .blk {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: #000;
        opacity: 0.4;
        z-index: 2;
      }
    }
    .image_cell:hover {
      .icon_list {
        display: block;
      }
      .blk {
        display: block;
      }
    }
  }
}
</style>
